<script setup>
import DraggableList from "@/components/DraggableList.vue";
import { reactive } from 'vue';
import { useRouter } from "vue-router";
import { useHomeStore } from "@/stores/home";
import { sortShortcuts, deleteShortcut } from "@/api/user";
import {EditPen, Delete} from '@element-plus/icons-vue'

const data = reactive({
  currentRightClickItem: {}
})
const router = useRouter();
const useStore = useHomeStore();

/**
 * 处理网址捷径位置更新事件
 * @param from 从哪里
 * @param to 到哪里
 */
const handleDragUp = (from, to) => {
  sortShortcuts(from, to).then((res) => {
    console.log(res);
  });
};

/**
 * 添加捷径事件
 */
function handleAddShortcut() {
  useStore.showAddUrlWindow = true
};

/**
 * 修改捷径事件
 */
const handleChangeShortcut = () => {
  useStore.currentRightClickItem = data.currentRightClickItem.id
  useStore.showChangeUrlWindow = true
};

/**
 * 删除捷径事件
 */
const handleDeleteShortcut = () => {
  deleteShortcut(data.currentRightClickItem.id).then(res => {
    if (res.code === 20000) {
      useStore.deleteShortcut(data.currentRightClickItem.id);
      ElMessage({
        showClose: true,
        message: `删除成功`,
        type: "success",
      });
    } else {
      ElMessage({
        showClose: true,
        message: `删除失败`,
        type: "error",
      });
    }
  });
};

/**
 * 记录点击右键菜单时，点击的对象
 * @param e
 */
const handleRightClick = e => {
  data.currentRightClickItem = e
}
</script>

<template>
  <div class="shortcuts">
    <DraggableList
      v-model="useStore.shortcuts"
      @update="handleDragUp"
      item-key="id"
    >
      <template v-slot:header>
        <div class="shortcuts-item-wrapper">
          <div class="shortcuts-item transition middle" @click.stop="handleAddShortcut">
            <svg aria-hidden="true" class="icon">
              <use xlink:href="#icon-jiahao1"></use>
            </svg>
          </div>
        </div>
      </template>

      <template v-slot:item="{ element }">
        <!--suppress VueUnrecognizedDirective -->
        <div class="shortcuts-item-wrapper" @click.stop @contextmenu.stop.prevent="handleRightClick(element)" v-contextmenu:contextmenu>
          <div class="shortcuts-item transition">
            <a :href="element.url" target="_blank" :title="element.title">
              <img :src="element.ico" :alt="element.title">
              <div class="delete-button">x</div>
              <p>{{ element.title }}</p>
            </a>
          </div>
        </div>
      </template>
    </DraggableList>

    <v-contextmenu ref="contextmenu">
      <v-contextmenu-item @click="handleChangeShortcut">
        <el-icon style="margin-right: 8px"><EditPen /></el-icon> 修改
      </v-contextmenu-item>
      <v-contextmenu-item @click="handleDeleteShortcut">
        <el-icon style="margin-right: 8px"><Delete /></el-icon> 删除
      </v-contextmenu-item>
    </v-contextmenu>
  </div>
</template>

<style lang="less" scoped>
.shortcuts {
  width: 100%;
  height: 100%;
  overflow-y: auto;

  &::-webkit-scrollbar {
    display: none;
  }

  .shortcuts-item-wrapper {
    .shortcuts-item {
      position: relative;
      width: 80px;
      height: 80px;
      background-color: white;
      border-radius: 10px;
      display: flex;
      justify-content: space-evenly;
      flex-direction: column;
      align-items: center;

      &:hover {
        opacity: .35;
      }

      a {
        box-sizing: border-box;
        padding: 8px;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-evenly;
        flex-direction: column;
        align-items: center;

        img {
          width: 18px;
          height: 18px;
        }

        p {
          width: 100%;
          color: black;
          font-size: 12px;
          text-align: center;
          overflow: hidden;
          // 单行网址
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: normal;
          // 双行网址
          // display: -webkit-box;
          // -webkit-line-clamp: 2;
          // -webkit-box-orient: vertical;
        }

        @media screen and (max-width: 375px) {
          p {
            font-size: 10px;
          }
        }
        
        .delete-button {
          display: none;
          z-index: 2;
          cursor: pointer;
          position: absolute;
          right: -5px;
          top: -5px;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          text-align: center;
          line-height: 20px;
          background-color: red;
        }
      }
    }

    .middle {
      background-color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;

      .icon {
        width: 48px;
        height: 48px;
        fill: #a3a2a2;
      }

      &:hover {
        .icon {
          fill: black;
        }
      }
    }
  }
}
</style>

<style>
.v-contextmenu {
  /*transition: 250ms cubic-bezier(0.64, 0.08, 0.16, .98);*/
  border: none;
  font-size: 1rem;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .15), 0 0 30px rgba(0, 0, 0, .15);
}

.v-contextmenu-item {
  display: flex;
}

@media screen and (max-width: 365px) {
  .shortcuts-item{
    width: 75px !important;
    height: 75px !important;
  }

}
@media screen and (max-width: 350px) {
  .shortcuts-item{
    width: 73px !important;
    height: 73px !important;
  }

}
@media screen and (max-width: 341px) {
  .shortcuts-item{
    width: 71px !important;
    height: 71px !important;
  }
}
</style>